import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import { Button, Table, Pagination, Modal, message } from 'antd';
import moment from 'moment';
import http from '@/common/http';
import TabTitle from '@/components/TabTitle/TabTitle';
import FilterBar from './components/FilterBar/FilterBar'

const confirm = Modal.confirm;

@inject('rootStore') @observer
class Template extends Component {

  componentDidMount() {
    this.toGetList()
  }

  toGetList = () => {
    const integrationStore = this.props.rootStore.integrationTemplateStore;

    integrationStore.toGetTemplateList()
  }

  showDeleteConfirm = (id) => {
    const integrationStore = this.props.rootStore.integrationTemplateStore;
    confirm({
      title: 'Are you sure delete this template?',
      content: '',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        const param = {
          id: id
        }

        http.post('/integral/activity/delete', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            integrationStore.toGetTemplateList()
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });

  }

  render() {
    const integrationStore = this.props.rootStore.integrationTemplateStore;
    const breadCrumb = ['Integration', 'Integral Template']
    const columns = [{
      title: 'Title',
      dataIndex: 'name'
    }, {
      title: 'Target User',
      dataIndex: ''
    }, {
      title: 'State',
      dataIndex: ''
    }, {
      title: 'Available Time',
      render: (text, record) => (
        <div>
          <div>{moment(record.startTime).format('YYYY-MM-DD MM:ss')} - </div>
          <div>{moment(record.endTime).format('YYYY-MM-DD MM:ss')}</div>
        </div>
      )
    }, {
      title: 'Notes',
      dataIndex: ''
    }, {
      title: 'Operation',
      render: (text, record) => (
        <div className="edit-config">
          <span className="edit-text" onClick={() => this.props.toEdit(record.id)}>Edit</span>
          <span className="edit-text" onClick={() => this.props.toEdit(record.id)}>Enable</span>
          <span className="edit-text" onClick={() => this.showDeleteConfirm(record.id)}>Delete</span>
        </div>
      )
    }]

    return (
      <div className="news-list">
        <TabTitle
          showTabbar={false}
          title="Integral Template"
          breadCrumb={breadCrumb} />
        <div className="page-content mt144">
           <FilterBar />
           <div className="list-table">
             <div className="config-btn-group">
               <Button
                 type="primary"
                 className="config-btn"
                 onClick={this.showBatchApproveConfirm}>+ Add</Button>
             </div>
             <div>
               <Table
                 rowKey="id"
                 className="select-table"
                 dataSource={integrationStore.templateList}
                 columns={columns}
                 pagination={false} />
               <Pagination
                 className="tr mt10"
                 showQuickJumper
                 showSizeChanger
                 showTotal={total => `Total ${total}`}
                 total={integrationStore.templateListTotal}
                 onChange={this.pageOnChange}
                 onShowSizeChange={this.pageSizeOnChange}
                 current={integrationStore.templateParam.pageIndex} />
             </div>
           </div>
        </div>
      </div>
    )
  }
}

export default Template;
